<!--&lt;!&ndash;<h1>直播显示组件</h1>&ndash;&gt;-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/alt/video-js-cdn.min.css" rel="stylesheet">
<!--&lt;!&ndash;<input style="display: block" [(ngModel)]="video.src">&ndash;&gt;-->

<!--&lt;!&ndash;<button (click)="getDNS()">获取DNS</button>&ndash;&gt;-->

<!--<div class="w-c-2">-->
  <!--<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"-->
         <!--width="500" height="400" data-setup='{}' id="test_video">-->

  <!--</video>-->
<!--</div>-->

<div class="row">
  <div class="col-xl-4">

    <!--begin:: Widgets/Announcements 1-->
    <div class="m-portlet m--bg-accent m-portlet--bordered-semi m-portlet--skin-dark m-portlet--full-height ">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">
              Onvif RTMP Video 概述
            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul class="m-portlet__nav">
            <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
              <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl">
                <i class="la la-ellipsis-h m--font-light"></i>
              </a>
              <div class="m-dropdown__wrapper" style="z-index: 101;">
                <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 21.5px;"></span>
                <div class="m-dropdown__inner">
                  <div class="m-dropdown__body">
                    <div class="m-dropdown__content">
                      <ul class="m-nav">
                        <li class="m-nav__section m-nav__section--first">
                          <span class="m-nav__section-text">帮助</span>
                        </li>
                        <li class="m-nav__item">
                          <a href="#" class="m-nav__link">
                            <i class="m-nav__link-icon flaticon-share"></i>
                            <span class="m-nav__link-text">GitHub</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body">

        <!--begin::Widget 7-->
        <div class="m-widget7 m-widget7--skin-dark">
          <div class="m-widget7__desc">
            Onvif RMTP Video 前端组件是基于Onvif规范RTSP协议通过RTSP推流实现的在线实时视频传输解决方案的分离子项目组件，该页面展示了组件的基本概貌，你也可以点击菜单中GitHub栏目了解细节
          </div>
          <div class="m-widget7__user">
            <div class="m-widget7__user-img">
              <img class="m-widget7__img" src="assets/app/media/img//users/100_3.jpg" alt="">
            </div>
            <div class="m-widget7__info">
													<span class="m-widget7__username">
														可乐丶君
													</span><br>
              <span class="m-widget7__time">
														Thu Nov 22 2018
													</span>
            </div>
          </div>
          <div class="m-widget7__button">
            <a class="m-btn m-btn--pill btn btn-danger" href="#" role="button">GitHub >></a>
          </div>
        </div>

        <!--end::Widget 7-->
      </div>
    </div>

    <!--end:: Widgets/Announcements 1-->
  </div>
  <div class="col-xl-4">

    <!--begin:: Widgets/Blog-->
    <div class="m-portlet m-portlet--bordered-semi m-portlet--full-height  m-portlet--rounded-force" m-portlet="true" id="m_portlet_tools_5">

      <div class="m-portlet__head m-portlet__head--fit">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text" style="color: #fff">
              唐山新质点科技有限公司
            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul class="m-portlet__nav">
            <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
              <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl">
                <i class="la la-ellipsis-h m--font-light"></i>
              </a>
              <div class="m-dropdown__wrapper" style="z-index: 101;">
                <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 21.5px;"></span>
                <div class="m-dropdown__inner">
                  <div class="m-dropdown__body">
                    <div class="m-dropdown__content">
                      <ul class="m-nav">
                        <li class="m-nav__section m-nav__section--first">
                          <span class="m-nav__section-text">视频播放控制</span>
                        </li>
                        <li class="m-nav__item">
                          <a href="#" class="m-nav__link" (click)="changeSoundStatus()">
                            <i class="m-nav__link-icon la"  [class.la-bell-slash-o]='ControlStatus.isSound' [class.la-bell-o]='!ControlStatus.isSound'></i>
                            <span class="m-nav__link-text">{{ControlStatus.isSound ? ControlStatus.tools.sound.off : ControlStatus.tools.sound.on}} </span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="#" class="m-nav__link" (click)="changePlayStatus()">
                            <i class="m-nav__link-icon la" [class.la-pause]='ControlStatus.isPlay' [class.la-play]='!ControlStatus.isPlay'></i>
                            <span class="m-nav__link-text">{{ControlStatus.isPlay ? ControlStatus.tools.play.off : ControlStatus.tools.play.on}} </span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="#" class="m-nav__link" m-portlet-tool="fullscreen" (click)="changeFullScreenStatus()">
                            <i class="m-nav__link-icon la la-expand"></i>
                            <span class="m-nav__link-text">{{ControlStatus.isFullScreen ? ControlStatus.tools.screen.off : ControlStatus.tools.screen.on}} </span>
                          </a>
                        </li>
                        <li class="m-nav__separator m-nav__separator--fit">
                        </li>
                        <li class="m-nav__section m-nav__section--first">
                          <span class="m-nav__section-text">云控制</span>
                        </li>
                        <li class="m-nav__item">
                          <a href="" class="m-nav__link">
                            <i class="m-nav__link-icon flaticon-share"></i>
                            <span class="m-nav__link-text">上</span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="" class="m-nav__link">
                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                            <span class="m-nav__link-text">下</span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="" class="m-nav__link">
                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                            <span class="m-nav__link-text">左</span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="" class="m-nav__link">
                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                            <span class="m-nav__link-text">右</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="m-portlet__body">
        <div class="m-widget19">
          <div class="m-widget19__pic m-portlet-fit--top m-portlet-fit--sides" style="min-height-: 286px">
            <video class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" autoplay="autoplay" data-setup='{}' id="test_video">
            </video>
          </div>

          <!-- 监控控制面板 -->
          <app-video-control></app-video-control>
        </div>
      </div>
    </div>

    <!--end:: Widgets/Blog-->
  </div>
  <div class="col-xl-4">

    <!--begin:: Widgets/Sales States-->
    <div class="m-portlet m-portlet--full-height ">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">
              {{left_menu.title}}
            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul class="m-portlet__nav">
            <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
              <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon m-portlet__nav-link--icon-xl">
                <i class="fa fa-genderless m--font-brand"></i>
              </a>
              <div class="m-dropdown__wrapper">
                <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust" style="left: auto; right: 17px;"></span>
                <div class="m-dropdown__inner">
                  <div class="m-dropdown__body">
                    <div class="m-dropdown__content">
                      <ul class="m-nav nav nav-tabs m-tabs">
                        <li class="m-nav__item">
                          <a href="#device_info" class="m-nav__link" data-toggle="tab">
                            <i class="m-nav__link-icon flaticon-share"></i>
                            <span class="m-nav__link-text" (click)="changeBoard(left_menu.device_info)">{{left_menu.device_info}}</span>
                          </a>
                        </li>
                        <li class="m-nav__item">
                          <a href="#device_info_2" class="m-nav__link" data-toggle="tab">
                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                            <span class="m-nav__link-text" (click)="changeBoard(left_menu.network_info)">{{left_menu.network_info}}</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body">
        <div class="tab-content">
          <div id="device_info" class="tab-pane active">
            <app-device-info></app-device-info>
          </div>

          <div id="device_info_2" class="tab-pane">
            <app-device-dns></app-device-dns>
          </div>
        </div>
      </div>
    </div>

    <!--end:: Widgets/Sales States-->
  </div>
</div>
